<template>
	<div class="pagesListcont">
		<div class="listItems" v-for="(ite,idx) in list" :key="index">
			<div class="closeBox" @click.stop='closeEvnet(ite,idx)'>
				<div class="closeoxYes" v-if="ite.statusShow">

				</div>
				<div class="closeBoxNo" v-else>

				</div>
			</div>
			<div class="listItems_title" @click='bianjiEvnet(ite,idx)'>
				<div class="listItems_title_left">
					{{ite.type}}
					<p>{{ite.number || ''}}</p>
				</div>
				<div class="listItems_title_right" :class="'roomColor'+ite.status">
					{{ite.status | statusFilterSB}}
				</div>
			</div>
			<div class="listItems_cont" @click='bianjiEvnet(ite,idx)'>
				<!-- <p>配备数量：1 <span style="margin-left: 50rpx;">价格: {{ite.price}}元</span></p> -->
				<p>{{ite.model || ''}}</p>
				<p v-if="ite.address">｜</p> <span>{{ite.address || ''}}</span> <span class="slError" v-if='ite.statuss == 5'>数量异常</span>

				<!-- <p>置购日期：{{ite.time || ''}}</p>
				<p>经办人：{{ite.name || ''}}</p>
				<p>转移时间：{{ite.name_time || ''}}</p>
				<p>创建时间：{{ite.addtime || ''}}</p> -->

			</div>
			<!-- 	<div class="listItems_bz">
				备注：xxx问题有点大 尽快！
			</div> -->
			<!-- btn -->
			<!-- 	<div class="listItems_btn">
				 
				<div class="listItems_btn_zj btn" @click.stop='bianjiEvnet(ite,idx)' v-if="ite.status  == 1">
					编辑
				</div>
				<div class="listItems_btn_cl btn" @click.stop='zyEvent(ite,idx)' v-if="ite.status  == 1">
					转移
				</div>
			</div> -->
		</div>
		<frool v-if="froolShow" :froolShow='froolShow' @confirm='FroolConfirm' @cancel='froolShow=false'></frool>
		<!-- btn -->
	</div>
</template>

<script>
	import frool from '@/pages/server/components/frool.vue'
	export default {
		components: {
			frool
		},
		// 1正常 2维修中 3报废 4故障
		filters: {
			statusFilterSB(v) {
				var s = ''
				// 1可预定 2待入驻 3已入住 4待搬离 5未保洁
				switch (v) {
					case '1':
						s = '正常'
						break;
					case '2':
						s = '维修中'
						break;
					case '3':
						s = '报废'
						break;
					case '4':
						s = '故障'
						break;
				}
				return s
			}
		},
		props: {
			list: [Array, String, Number]
		},
		data() {
			return {
				froolShow: false,
				from: {},
				equipment_id: []
			}
		},
		methods: {
			zyEvent(e, idx) {
				// 获取到id
				this.equipment_id = []
				for (var i in this.list) {
					if (this.list[i].statusShow) {
						this.equipment_id.push(this.list[i].equipment_id)
					}
				}
				if (this.equipment_id.length <= 0) return uni.showToast({
					title: "请最少选择一个设备",
					mask: true,
					icon: "none",
					duration: 1000
				})
				this.froolShow = true

			},
			bianjiEvnet(e, idx) {
				const ite = this.list[idx]
				uni.navigateTo({
					url: '/pagesA/index/SB/sbDetail?id=' + ite.equipment_id
				})
			},
			
			async FroolConfirm(e) {
				var params = {
					equipment_ids: JSON.stringify(this.equipment_id),
					room_id: e.room_id,
					storey_id: e.storey_id,
					floor_id: e.floor_id,
				}
				const {
					data
				} = await this.$request(this.$Api.roomMoreEquipments, params, "POST")
				if (data.code !== 0) return
				this.$emit('upDate')
				uni.showToast({
					title: "操作成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
			},
			//选中
			closeEvnet(ite, idx) {
				this.$emit("closeEvnet", idx)
			}
		}
	}
</script>

<style lang="less">
	.pagesListcont {
		.listItems {
			width: 694rpx;
			min-height: 122rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 20rpx auto 0 auto;
			padding: 0 40rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #000;
			padding-left: 88rpx;
			position: relative;
			padding-bottom: 20rpx;

			.closeBox {
				width: 42rpx;
				height: 42rpx;


				position: absolute;
				left: 22rpx;
				top: 50%;
				margin-top: -21rpx;


				.closeBoxNo {
					width: 42rpx;
					height: 42rpx;
					background: #FFFFFF;
					border: 4rpx solid #DDDDDD;
					box-sizing: border-box;
					border-radius: 50%;
				}

				.closeoxYes {
					width: 42rpx;
					height: 42rpx;
					background: #2E61FF;
					border: 4rpx solid #DDDDDD;
					box-sizing: border-box;
					border-radius: 50%;
				}
			}

			.listItems_btn {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				height: 120rpx;

				.btn {
					width: 164rpx;
					height: 68rpx;
					background: #FFFFFF;
					border: 2rpx solid #999999;
					margin-left: 26rpx;
					text-align: center;
					line-height: 68rpx;

				}

				.listItems_btn_zj {
					color: #3B7AFF;
					border: 2rpx solid #2D60FF;
				}

				.listItems_btn_cl {
					color: #fff;
					border: 2rpx solid #2D60FF;
					background: #2D60FF;
				}

			}

			.listItems_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 108rpx;
				width: 100%;

				.listItems_title_left {
					display: flex;

					p {
						margin-left: 12rpx;
					}
				}
			}

			.listItems_title_right {
				color: #FF1D1D;
			}

			.listItems_cont {
				display: flex;
				font-size: 28rpx;
				flex-wrap: wrap;

				p {
					color: #666;
					font-size: 28rpx;
					margin-bottom: 14rpx;
				}

				span {
					margin-right: 12rpx;
					color: #666;
				}
				.slError{
					padding: 0rpx 6rpx;
					color: #fff;
					max-height: 32rpx;
					height: 32rpx;
					background: #D0021B;
					font-size: 24rpx;
				}
			}

			.listItems_bz {
				min-height: 10rpx;
				padding: 10rpx 0 30rpx 0;
				border-bottom: 1px solid #DDDDDD;
				color: #666;
				font-size: 28rpx;

			}
		}
	}
</style>